<template>
    <div id="video1-contianer">
        <video class="video" ref="video" style="width: 100%; height: 100%;" preload="auto" autoplay="autoplay"
            muted></video>
        <div class="mask" @click="handleClickVideo" :class="{ 'active-video-border': selectStatus }"></div>
    </div>
</template>

<script>
import WebRtcStreamer from "../../../public/webrtcstreamer";

export default {
    name: "videoCom",
    props: {
        rtsp: {
            type: String,
            required: true,
        },
        isOn: {
            type: Boolean,
            default: false,
        },
        spareId: {
            type: Number,
        },
        selectStatus: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            socket: null,
            result: null, // 返回值
            pic: null,
            webRtcServer: null,
            clickCount: 0, // 用来计数点击次数
        };
    },
    watch: {
        rtsp() {
            // do something
            // console.log(this.rtsp);
            this.webRtcServer.disconnect();
            this.initVideo();
        },
    },
    destroyed() {
        this.webRtcServer.disconnect();
    },
    beforeCreate() {
        window.onbeforeunload = () => {
            this.webRtcServer.disconnect();
        };
    },
    created() { },
    mounted() {
        this.initVideo();

      
    },
    methods: {
        initVideo() {
            try {
                console.log("视频流地址", this.rtsp);
                this.webRtcServer = new WebRtcStreamer(
                    this.$refs.video,
                    `http://10.248.7.213:8000`
                    // `http://192.168.2.108:8000`
                );
                this.webRtcServer.connect(this.rtsp);
            } catch (error) {
                console.log(`视频加载失败`, error);
            }
        },
        /* 处理双击 单机 */
        dbClick() {
            this.clickCount++;
            if (this.clickCount === 2) {
                this.btnFull(); // 双击全屏
                this.clickCount = 0;
            }
            setTimeout(() => {
                if (this.clickCount === 1) {
                    this.clickCount = 0;
                }
            }, 250);
        },
        /* 视频全屏 */
        btnFull() {
            const elVideo = this.$refs.video;
            if (elVideo.webkitRequestFullScreen) {
                elVideo.webkitRequestFullScreen();
            } else if (elVideo.mozRequestFullScreen) {
                elVideo.mozRequestFullScreen();
            } else if (elVideo.requestFullscreen) {
                elVideo.requestFullscreen();
            }
        },
        /* 
          ison用来判断是否需要更换视频流
          dbclick函数用来双击放大全屏方法
          */
        handleClickVideo() {
            if (this.isOn) {
                this.$emit("selectVideo", this.spareId);
                this.dbClick();
            } else {
                this.btnFull();
            }
        },
    },
};
</script>

<style scoped lang="less">
* {
    padding: 0;
    margin: 0;
}

.active-video-border {
    border: 2px salmon solid;
}

.video {
    width: 100%;
    height: 100%;
}

#video-contianer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
}
</style>